<template>
	<el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">

		<el-tab-pane label="基本资料" name="first">
			<div id="app1">
				<el-row>
					<el-col :span="12">
						<span>手机号:</span><span>{{user.user_sjh}}</span><br />
						<p></p>
						<span>用户性别:</span><span>{{user.user_sex === 2 ? '女' : (user.user_sex === 1 ? '男' : '未知')}}</span><br />
						<p></p>
						<span>用户名:</span><span>{{user.user_name}}</span><br />
						<p></p>
					</el-col>
					<el-col :span="12">
						<span>用户邮箱:</span><span>{{user.user_email}}</span><br />
						<p></p>
						<span>收藏数:</span><span>99+</span><br />
						<p></p>
						<span>贴子数:</span><span>99+</span><br />
						<p></p>
					</el-col>

				</el-row>
			</div>
		</el-tab-pane>

		<el-tab-pane label="用户名修改" name="second">
			<div id="app2">
				<br>
				<div style="padding-left: 20px;">
					<el-form :model="user" label-position="right" label-width="auto" style="text-align: center;">
						<el-form-item label="用户名: " prop="user_name" class="username-item" style="color: gray;"
							size="large">
							<span>{{username}}</span>
						</el-form-item>
						<el-form-item label="新用户名: " prop="user_pwd" style="font-size: 25px;color: gray;">
							<input v-model="user.user_name" placeholder="新用户名" @blur="checkY()" clearable /> <br />
							<span>{{userTip.Tip1}}</span>
						</el-form-item>

					</el-form>
				</div>
				<el-row>
					<el-col>
						<div style="text-align: center; padding-top: 30px;">
							<el-button type="primary" @click="updateY()">保存(49.9rmb)</el-button>
							<el-button @click="Rest()">重置</el-button>
						</div>
					</el-col>
				</el-row>
			</div>
		</el-tab-pane>

		<el-tab-pane label="密码修改" name="third">
			<div id="app3">
				<br>
				<el-form :model="user" label-position="right" label-width="auto">
					<el-form-item label="旧密码" prop="yhm">
						<input v-model="inputPassword" placeholder="旧密码" clearable />
					</el-form-item>

					<el-form-item label="新密码" prop="pwd">
						<input v-model="newPwd" placeholder="密码" @blur="checkP1()" clearable />
					</el-form-item>

					<span class="tip" style="font-size: 15px;margin-top: -36px;">{{userTip.Tip2}}</span>

					<el-form-item label="重复新密码" prop="pwd">
						<input v-model="userTip.pwd2" placeholder="密码" @blur="checkP2()" clearable />

					</el-form-item>

					<span class="tip" style="font-size: 15px;margin-top: 18px;">{{userTip.Tip3}}</span>
				</el-form>
				<el-row>
					<el-col>
						<div style="text-align: center;">
							<el-button type="primary" @click="updateP()">保存</el-button>
							<el-button @click="doRest()">重置</el-button>
						</div>
					</el-col>
				</el-row>
			</div>


		</el-tab-pane>

		<el-tab-pane label="头像" name="fourth">

			<div id="app4">
				<div>
					<el-avatar :size="120" src="https://empty">
						<img :src="user_tx">
					</el-avatar>
				</div>

				<p></p>
				<p></p>
				<p></p>
				<div> <el-col :span="24">
						<el-upload ref="upload" class="upload-demo" action="http://localhost:3000/api/user/yhtxUpload"
							:limit="1" :auto-upload="false" :on-success="handleSuccess">
							<template #trigger>
								<el-button type="primary" style="bottom:10px ;">选择文件</el-button>
							</template>
							&nbsp;
							<el-button class="ml-3" type="success" @click="submitUpload">
								上传到服务器
							</el-button>
							<template #tip>
								<div class="el-upload__tip text-red">
									限制上传一个文件，旧文件会被新文件覆盖
								</div>
							</template>
						</el-upload>
					</el-col>
				</div>

			</div>
		</el-tab-pane>

	</el-tabs>
</template>
<script setup lang="ts">
	import { onMounted, ref } from 'vue'
	import type { TabsPaneContext, UploadInstance } from 'element-plus'
	import axios from 'axios';
	import { ElMessage } from 'element-plus';






	const activeName = ref('first')

	//表格数据
	const tableData = ref([]);


	const handleClick = (tab : TabsPaneContext, event : Event) => {
		console.log(tab, event)
	}


	//个人信息

	const user = ref(JSON.parse(localStorage.getItem("user")));
	const user_tx = ref(
		"/api/src/images/" + user.value.user_tx
	)
	const username = user.value.user_name;
	const userTip = ref({
		pwd2: '',
		Tip1: '',
		Tip2: '',
		Tip3: '',
	})
	const inputPassword = ref(''); // 绑定到旧密码输入框
	const newPwd = ref(''); // 绑定到新密码输入框

	const myIfm = () => {
		axios({
			url: '/api/user/upupdate',
			method: 'put',
			params: user.value,
		})
			.then(response => {
				if (response.data === true) {
					// alert(user.value.user_tx)
					ElMessage.success("上传成功！");
					user_tx.value = "/api/src/images/" + user.value.user_tx;
					// console.log(localStorage.getItem("user"));
					localStorage.setItem("user", JSON.stringify(user.value));
				} else {
					ElMessage.error("上传失败!");
				}
			})
			.catch(error => {
				console.error('Error fetching user data:', error);
				// 这里可以添加错误处理逻辑，比如显示错误消息给用户
			});
	};






	//修改函数

	const updateY = () => {
		const usernameValid = checkY();
		if (usernameValid == true) {
			axios({
				url: '/api/user/yhmupdate',
				method: 'put',
				params: user.value,
			}).then(response => {
				if (response.data === true) {
					ElMessage.success("修改成功！");
					localStorage.setItem("user", JSON.stringify(user.value));
				} else {
					ElMessage.error("操作失败!");
				}
			});
		}
	}

	const updateP = () => {

		if (inputPassword.value == user.value.user_pwd) {

			const pppo = checkP1();
			const pppt = checkP2();
			if (pppo && pppt) {

				user.value.user_pwd = newPwd.value;
				axios({
					url: '/api/user/pwdupdate',
					method: 'put',
					params: user.value,
				}).then(response => {
					if (response.data === true) {
						ElMessage.success("修改成功");
						localStorage.setItem("user", JSON.stringify(user.value));
					} else {
						ElMessage.error("修改失败");
					}
				});
			}
		} else {
			alert("原密码错误");
		}
	}






	//验证函数

	const checkY = () => {
		if (user.value.user_name.length != 0 || /^\s+$/.test(user.value.user_name)) {
			userTip.value.Tip1 = "";
			return true;
		} else {
			userTip.value.Tip1 = '用户名不符合要求';
			return false;
		}
	}

	const checkP1 = () => {
		if (newPwd.value.length != 0 || /^\s+$/.test(newPwd.value)) {
			userTip.value.Tip2 = "";
			return true;
		} else {
			userTip.value.Tip2 = '密码不符合要求';
			return false;
		}

	}

	const checkP2 = () => {
		if (newPwd.value == userTip.value.pwd2) {
			userTip.value.Tip3 = '';
			return true;
		} else {
			userTip.value.Tip3 = '两次密码需要一致';
			return false;
		}

	}


	// 获取上传组件实例
	const upload = ref<UploadInstance>()

	// 上传文件
	const submitUpload = () => {
		upload.value!.submit()
	}

	// 成功上传后的回调函数
	const handleSuccess = res => {
		user.value.user_tx = res;
		myIfm();
	}

	const doRest = () => {
		inputPassword.value = '';
		newPwd.value = '';
		userTip.value.pwd2 = '';
		userTip.value.Tip1 = '';
		userTip.value.Tip2 = '';
		userTip.value.Tip3 = '';

	}

	const Rest = () => {
		user.value.user_name = '';
		userTip.value.Tip1 = '';
	}

	//JZ
	onMounted(() => {

	});
</script>

<style scoped>
	.demo-tabs>.el-tabs__content {
		padding: 32px;
		color: #6b778c;
		font-size: 32px;
		font-weight: 600;
	}

	.tip {
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
	}

	#app1 {
		margin-top: 115px;
		width: 850px;
		height: 240px;
		background-color: rgba(250, 235, 215, 0.5);
		margin-left: 50px;
	}


	/* 定位到特定的 span 标签并设置样式 */
	#app1 span {
		font-size: 25px;
		color: gray;
		/* padding: 10px; */
		/* 添加内边距，可以根据需要调整数值 */
		margin: 10px;
		/* 添加外边距，可以根据需要调整数值 */
	}

	#app1 p {
		padding: 5px;
	}

	#app2 {
		margin-top: 115px;
		width: 600px;
		height: 240px;
		background-color: rgba(250, 235, 215, 0.5);
		margin-left: 50px;
	}

	.username-item .el-form-item__label {
		font-size: 25px !important;
		/* 设置标签的大小 */
	}

	.username-item .el-form-item__content span {
		font-size: 15px;
		/* 设置用户名的字体大小 */
	}

	#app3 {
		margin-top: 115px;
		width: 600px;
		height: 240px;
		background-color: rgba(250, 235, 215, 0.5);
		margin-left: 50px;
	}

	#app4 {
		margin-top: 115px;
		width: 600px;
		height: 240px;
		background-color: rgba(250, 235, 215, 0.5);
		margin-left: 50px;
	}

	#app4 div {
		text-align: center;
		padding: 5px;
	}
</style>